<template>
  <view class="calendar-container">
    <!-- 日历头部 - 年月和切换按钮 -->
    <view class="calendar-header">
      <view class="header-btn" @click="changeMonth(-1)">
        <text class="iconfont icon-left">◀</text></text>
      </view>
      <view class="header-title">
        {{ currentYear }}年{{ currentMonth + 1 }}月
      </view>
      <view class="header-btn" @click="changeMonth(1)">
        <text class="iconfont icon-right">▶</text>
      </view>
    </view>

    <!-- 星期标题 -->
    <view class="weekdays">
      <view class="weekday" v-for="(day, index) in weekdays" :key="index">
        {{ day }}
      </view>
    </view>

    <!-- 日期网格 -->
    <view class="dates" :class="{ collapsed: isCollapsed }">
      <view 
        class="date-item" 
        v-for="(item, index) in dateList" 
        :key="index"
        @click="onDateClick(item)"
        :class="[
          { 'other-month': item.otherMonth },
          { 'current-day': item.isToday },
          { 'weekend': index % 7 === 5 || index % 7 === 6 },
          { 'has-event': item.hasEvent },
          { 'selected': item.isSelected }
        ]"
      >
        <text class="date-number">{{ item.date }}</text>
        <view class="event-dot" v-if="item.hasEvent"></view>
      </view>
    </view>

    <!-- 折叠/展开按钮 -->
    <view class="toggle-btn" @click="toggleCollapse">
      <text class="iconfont">{{ isCollapsed ? '▼' : '▲' }}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    // 初始日期
    initDate: {
      type: Date,
      default: () => new Date()
    },
    // 标记有事件的日期
    eventDates: {
      type: Array,
      default: () => [] // 格式: ['2023-10-05', '2023-10-15']
    }
  },
  data() {
    return {
      currentDate: null, // 当前显示的日期
      isCollapsed: true, // 是否折叠
      weekdays: ['一', '二', '三', '四', '五', '六', '日'], // 星期标题
      dateList: [] // 日期列表
    };
  },
  computed: {
    currentYear() {
      return this.currentDate.getFullYear();
    },
    currentMonth() {
      return this.currentDate.getMonth();
    }
  },
  watch: {
    currentDate: {
      handler() {
        this.generateDateList();
      },
      immediate: true
    },
    eventDates() {
      this.generateDateList();
    }
  },
  created() {
    this.currentDate = new Date(this.initDate);
  },
  methods: {
    // 生成日期列表
    generateDateList() {
      const year = this.currentYear;
      const month = this.currentMonth;
      const dateList = [];

      // 获取当月第一天
      const firstDay = new Date(year, month, 1);
      // 获取当月最后一天
      const lastDay = new Date(year, month + 1, 0);

      // 当月第一天是星期几 (0-6, 0是星期日)
      const firstDayWeek = firstDay.getDay() || 7; // 转换为周一为1，周日为7

      // 添加上月的占位日期
      const prevMonth = new Date(year, month, 0);
      const prevMonthDays = prevMonth.getDate();
      
      for (let i = 1; i < firstDayWeek; i++) {
        const date = prevMonthDays - firstDayWeek + 1 + i;
        dateList.push({
          date,
          otherMonth: true,
          isToday: false,
          hasEvent: false,
          fullDate: `${prevMonth.getFullYear()}-${(prevMonth.getMonth() + 1).toString().padStart(2, '0')}-${date.toString().padStart(2, '0')}`
        });
      }

      // 添加当月日期
      const today = new Date();
      const todayStr = `${today.getFullYear()}-${(today.getMonth() + 1).toString().padStart(2, '0')}-${today.getDate().toString().padStart(2, '0')}`;
      
      for (let i = 1; i <= lastDay.getDate(); i++) {
        const fullDate = `${year}-${(month + 1).toString().padStart(2, '0')}-${i.toString().padStart(2, '0')}`;
        dateList.push({
          date: i,
          otherMonth: false,
          isToday: fullDate === todayStr,
          hasEvent: this.eventDates.includes(fullDate),
          fullDate,
          isSelected: false
        });
      }

      // 添加下月的占位日期
      const nextMonthDays = 42 - dateList.length; // 保证6行显示
      for (let i = 1; i <= nextMonthDays; i++) {
        dateList.push({
          date: i,
          otherMonth: true,
          isToday: false,
          hasEvent: false,
          fullDate: `${year}-${(month + 2).toString().padStart(2, '0')}-${i.toString().padStart(2, '0')}`
        });
      }

      this.dateList = dateList;
    },

    // 切换月份
    changeMonth(step) {
      this.currentDate = new Date(this.currentYear, this.currentMonth + step, 1);
    },

    // 切换折叠状态
    toggleCollapse() {
      this.isCollapsed = !this.isCollapsed;
    },

    // 点击日期
    onDateClick(item) {
      if (item.otherMonth) return;
      
      // 取消其他日期的选中状态
      this.dateList.forEach(date => {
        date.isSelected = false;
      });
      
      // 设置当前日期为选中
      item.isSelected = true;
      
      // 向父组件发射选中事件
      this.$emit('dateSelect', item.fullDate);
    }
  }
};
</script>

<style scoped>
.calendar-container {
  width: 100%;
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

/* 头部样式 */
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx;
  background-color: #f8f9fa;
}

.header-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-size: 32rpx;
}

.header-btn:active {
  background-color: #e9ecef;
}

.header-title {
  font-size: 34rpx;
  font-weight: 500;
  color: #333;
}

/* 星期标题 */
.weekdays {
  display: flex;
  border-bottom: 1px solid #f0f0f0;
}

.weekday {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  font-size: 28rpx;
  color: #666;
}

.weekday:nth-child(6),
.weekday:nth-child(7) {
  color: #ff4d4f;
}

/* 日期网格 */
.dates {
  display: flex;
  flex-wrap: wrap;
  transition: max-height 0.3s ease;
}

/* 折叠状态只显示一行 */
.collapsed {
  max-height: 120rpx;
  overflow: hidden;
}

/* 展开状态显示全部 */
.dates:not(.collapsed) {
  max-height: 720rpx;
}

/* 日期项 */
.date-item {
  width: 14.2857%; /* 7等分 */
  height: 120rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  font-size: 28rpx;
  border-bottom: 1px solid #f0f0f0;
  border-right: 1px solid #f0f0f0;
  box-sizing: border-box;
}

/* 清除最后一列的右边框 */
.date-item:nth-child(7n) {
  border-right: none;
}

/* 其他月份的日期 */
.other-month .date-number {
  color: #ccc;
}

/* 周末日期 */
.weekend .date-number {
  color: #ff4d4f;
}

/* 当前日期 */
.current-day .date-number {
  background-color: #36bffa;
  color: #fff;
  border-radius: 50%;
}

/* 日期数字 */
.date-number {
  width: 60rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  border-radius: 8rpx;
}

/* 有事件的日期标记 */
.event-dot {
  width: 12rpx;
  height: 12rpx;
  background-color: #ff4d4f;
  border-radius: 50%;
  margin-top: 8rpx;
}

/* 选中状态 */
.selected .date-number {
  background-color: #e6f7ff;
  color: #1890ff;
  font-weight: bold;
}

/* 折叠/展开按钮 */
.toggle-btn {
  height: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f8f9fa;
  font-size: 28rpx;
  color: #666;
}

.toggle-btn:active {
  background-color: #e9ecef;
}
</style>
